<template>
  <a-modal :width="600" title="选择代理" zIndex="9999" v-model="visible" :destroyOnClose="true" :footer="null">
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row :gutter="24">
        <a-col :md="12" :sm="24">
          <a-form-item label="账户">
            <a-input allow-clear placeholder="请输入账户" v-model="queryParam.user_name"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="昵称">
            <a-input allow-clear placeholder="请输入昵称" v-model="queryParam.name"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="手机">
            <div class="select">
              <a-input allow-clear placeholder="请输入手机号" v-model="queryParam.mobile"></a-input>
              <a-button type="primary" @click="$refs.table.refresh(1)">查询</a-button>
            </div>
          </a-form-item>
        </a-col>
        <!-- <a-col :md="8" :sm="24">
          <a-form-item label="类型">
            <div class="select">
              <a-select v-model="queryParam.area_level">
                <a-select-option value="-1"> 全部 </a-select-option>
                <a-select-option value="0"> 默认 </a-select-option>
                <a-select-option value="3"> 省 </a-select-option>
                <a-select-option value="2"> 市 </a-select-option>
                <a-select-option value="1"> 区 </a-select-option>
              </a-select>
              <a-button type="primary" @click="$refs.table.refresh(1)">查询</a-button>
            </div>
          </a-form-item>
        </a-col> -->
      </a-row>
    </a-form>

    <s-table ref="table" rowKey="id" :columns="manager" :data="loadData">
      <span slot="baseinfo" slot-scope="text, record">
        <a-tooltip>
          <template slot="title"> {{ record.name }} </template>
          <span>{{ record.name }}</span>
        </a-tooltip>
      </span>

      <span slot="action" slot-scope="text, record">
        <a-button type="primary" size="small" @click="onSelect(record)"> 选择 </a-button>
      </span>
    </s-table>
  </a-modal>
</template>

<script>
import { STable } from '@/components'
import storage from 'store'
import { getAdminListBySaas } from '@/api/auth'

const manager = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 100,
  },

  {
    title: '名称',
    scopedSlots: { customRender: 'baseinfo' },
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
    width: 100,
  },
]
export default {
  components: {
    STable,
  },

  data() {
    return {
      visible: false,
      queryParam: {
        name: '',
        mobile: '',
        status: '1',
        user_name: '',
        area_level: '-1',
        type: 1,
      },
      manager,
      // 选择用户数据加载
      loadData: (parameter) => {
        return getAdminListBySaas({
          storeId: storage.get('storeId'),
          type: 'user',
          ...parameter,
          ...this.queryParam,
        }).then((res) => {
          if (res.data && res.data.list) {
            res.data.data = res.data.list
          }

          return res.data
        })
      },

      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
    }
  },
  created() {},
  computed: {},

  methods: {
    onSelect(e) {
      this.visible = false
      this.$emit('select', e)
    },
  },
}
</script>
<style lang="less" scoped>
.select {
  display: flex;
  width: 100%;
}
</style>
